import Banner from './components/banner.jsx';
import ArticleList from "@/components/articleList.jsx"
import {useDispatch, useSelector} from "react-redux";
import {useState} from 'react';
import  {getAllArticlesAction,getTagArticlesAction} from  "@/store/actions/articlesAction.js"
import Tags from "./components/tags.jsx"
export default function Home() {
    const dispatch = useDispatch()
    const [tab, setTab] = useState(1);
    const { tag} = useSelector(state => state.tag);
    function  onPageCLick(){

    }


    return (
        <div className="home-page">
            <Banner/>
            <div className='container page'>
                <div className='row'>
                    {/*  左边 文章列表 */}
                    <div className="col-md-9">
                        <div className='aticles-toggle'>
                            <ul className='nav nav-pills outline-active'>
                                <li className='nav-item'>
                                    <span
                                        className={tab === 1 ? "nav-link active" : 'nav-link'}
                                        onClick={() => {
                                            setTab(1)
                                            // 获取作者的文章
                                            dispatch(getAllArticlesAction(1))
                                        }}
                                    >全部</span>
                                </li>
                                {
                                    tag ? <li className='nav-item'>
                                        <span
                                            className={tab === 2 ? "nav-link active" : 'nav-link'}
                                            onClick={() => {
                                                setTab(2)
                                                dispatch(getTagArticlesAction(tag, 1))
                                            }}
                                        >
                                             <i className="fa fa-bookmark"></i> {tag}
                                        </span>
                                    </li> : null
                                }

                            </ul>

                        </div>
                        <ArticleList
                            isShowPage={true}
                            onPageClick={onPageCLick}
                        />
                    </div>
                    {/* 右边 标签 */}
                    <div className="col-md-3">
                        <Tags setTab={setTab} />
                    </div>
                </div>
            </div>
        </div>
    )
}